{extend name="layout/layout" /}

{block name="content"}
<div class="layui-card">
    <div class="layui-card-header">
        <h3>价格趋势分析</h3>
    </div>
    <div class="layui-card-body">
        <div class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">时间范围</label>
                    <div class="layui-input-inline">
                        <input type="text" name="date_range" id="date_range" placeholder="选择日期范围" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">产品类别</label>
                    <div class="layui-input-inline">
                        <select name="category_id">
                            <option value="">全部类别</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="search">查询</button>
                </div>
            </div>
        </div>
        
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div id="price-trend-chart" style="height: 400px;"></div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script>
layui.use(['form', 'laydate'], function(){
    var form = layui.form;
    var laydate = layui.laydate;
    
    // 日期范围选择
    laydate.render({
        elem: '#date_range',
        range: true
    });
    
    // 初始化图表
    var chartDom = document.getElementById('price-trend-chart');
    var myChart = echarts.init(chartDom);
    
    // 处理后端传递的数据
    var trendData = {$trend_data|json_encode};
    console.log('Trend data:', trendData);
    
    var chartData = [];
    var dates = [];
    var prices = [];
    
    if (trendData && trendData.code === 1 && trendData.data) {
        chartData = trendData.data;
        dates = chartData.map(function(item) {
            return item.date;
        });
        prices = chartData.map(function(item) {
            return item.price;
        });
    }
    
    var option = {
        title: {
            text: '价格趋势图'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['价格']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: dates
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '价格',
                type: 'line',
                stack: 'Total',
                data: prices
            }
        ]
    };
    
    myChart.setOption(option);
    
    form.on('submit(search)', function(data){
        // 查询逻辑
        location.href = '{:url("trend")}?' + $.param(data.field);
        return false;
    });
});
</script>
{/block}